<template>
  <div class="shopping-classify">
    <div class="login-wrap">
      <el-form class="login-container">
        <h1 class="title">用户登陆</h1>
        <el-form-item>
          <el-input type="text" v-model="user.username" placeholder="用户账号" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input type="password" v-model="user.password" placeholder="用户密码" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login" style="width: 100%;">登陆</el-button>
        </el-form-item>
        <el-row style="text-align: center;margin-top: -10px;">
          <el-link type="primary" @click="dialog">注册账号</el-link>
          <el-link type="primary" @click="">忘记密码</el-link>
        </el-row>
      </el-form>
      <div id="app">
        <el-dialog title="注册" :visible.sync="dialogFormVisible">
          <el-form :model="user" ref="user">
            <el-form-item label="用户名">
              <el-input v-model="user.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="user.password"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="register">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
// 导入模块
import user from "./User";

export default {
  data() { //数据绑定
    return {
      userId: 0,
      user: {
        username: "hjj",
        password: "asd"
      },
      dialogFormVisible: false,
      formLabelWidth: '120px'
    }
  },
  methods: { //定义方法
    login() {
      //在函数中发送请求，访问服务器方法
      //目前在没有指向发送转换，this代表的就是vue的对象
      //如果this指向发生了变化（发生了请求等），就不再是vue对象了
      //存储当前this
      let _this = this;
      //发送请求
      /*
      * method属性：请求的方式
      * url属性：请求的地址
      * data属性：post put请求传参，表单格式
      * params属性:get请求传参，表单格式
      *headers属性：设置请求头
      * then（） 成功回调
      * catch（） 失败回调函数
      *
      * */
      this.$axios({
        method: 'post',
        url: 'user/login',
        //JSON.stringify：把JS对象转换为JSON字符串
        data: JSON.stringify(this.user),
      }).then(res => {//res就是服务器响应给前端的所有的数据内容
        //提示登录信息
        _this.$message(res.data.msg)
        //判断是否登录成功
        if (res.data.status === 200) {
          //登录成功：1.跳转到Index.vue 2.sessionStorage.localStorage
          //延迟函数

          setTimeout(() => {
            _this.userId = res.data.data.userId;
            //把当前登录用户名存入sessionStorage中
            sessionStorage.setItem('loginUsername', _this.user.username);

            sessionStorage.setItem('userId', _this.userId);
            //跳转到Index.vue
            _this.$router.push('/Index');
          }, 1000);

        }
        //登录失败
      }).catch(error => {
        _this.$message.error(error);
      })

    },
    dialog() {
      this.dialogFormVisible = true;
    },
    register() {
      this.dialogFormVisible = false;
      console.log(this.user)
      let _this = this;
      this.$axios({
        method: 'post',
        url: 'user/register',
        data: JSON.stringify(_this.user),
      }).then(res => {
        _this.$message.success("注册成功");
      }).catch(error => {
        _this.$message.error(error);
      })
    }

  },
}
</script>

<style>
.shopping-classify {
  display: flex;
  justify-content: center;
  align-items: stretch;
  background-size: 100% 100%;
  height: 100%;
  width: 100%;
  position: fixed;
}

.login-wrap {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding-top: 10%;
  background-image: url(../assets/background.jpeg);
  background-color: #112346;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: 100%;
}

.login-container {
  border-radius: 10px;
  margin: 0px auto;
  width: 350px;
  padding: 30px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  text-align: left;
  box-shadow: 0 0 20px 2px rgba(0, 0, 0, 0.1);
}

.title {
  margin: 0px auto 40px auto;
  text-align: center;
  color: #505458;
}
</style>
